<script setup>
import { audioList } from '@/utils/audio.js'
import {
  VideoPlay
} from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()

defineProps({
  data: {
    type: Array
  }
})
// 执行发音全部逻辑，冲中抽离出需要的函数
const { getRiskSpreadRef,
  clickAudio,
  getRiskSpreadRefM,
  clickAudioM } = audioList()


</script>

<template>
  <div class="goods" v-for="(item, index) in data" :key="item.id" @click="router.push({
    path: `/home/words/${item.id}`,
    query: item.id
  })">
    <audio :ref="el => getRiskSpreadRef(el, index)">
      <source :src="item.uk_phonetic_audio" type="audio/ogg" />
    </audio>
    <div class="box">
      <h1>{{ item.word }}</h1>
      <div class="item" @click.stop="clickAudio(index)">
        <span>英</span>
        <span class="yb">/{{ item.uk_phonetic }}/</span>
        <el-icon color="#5bbe9e">
          <VideoPlay />
        </el-icon>
      </div>
      <audio :ref="el => getRiskSpreadRefM(el, index)">
        <source :src="item.us_phonetic_audio" type="audio/ogg" />
      </audio>
      <div class="item" style="margin-left: 10px;" @click.stop="clickAudioM(index)">
        <span>美</span>
        <span class="yb">/{{ item.us_phonetic }}/</span>
        <el-icon color="#5bbe9e">
          <VideoPlay />
        </el-icon>
      </div>
    </div>
    <p class="Chinese">{{ item.explains[0].pos + item.explains[0].trans }}</p>
    <hr style='background-color:rgb(172, 172, 172); height:0.5px; border:none;' />
    <br>
  </div>
</template>

<style lang="scss" scoped>
.box {
  display: flex;
  position: relative;

  h1 {
    position: absolute;
  }

  .item {
    display: flex;
    align-items: center;
    background: #dddddd;
    width: fit-content; //自适应盒子里面的元素大小
    height: 30px;
    border-radius: 20px;
    padding: 10px;
    margin: 50px 0 20px 0;
    cursor: pointer;

    .yb {
      padding: 0 10px 0 10px;
    }
  }
}

.Chinese {
  font-size: 17px;
  font-weight: 500;
  margin: 10px 0 30px 0;
}
</style>
